<template>
  <el-dialog
    :title="'选择绑定的溯源'"
    :visible.sync="dialogVisible"
    width="1000px"
    :close-on-click-modal="false"
    :before-close="dialogBeforeClose"
    append-to-body
    class="dialog"
  >
    <div class="searchBox">
      <div>
        <el-tabs v-model="params.reportType" @tab-click="handleCurrentChange('isTop')">
          <el-tab-pane label="土壤" name="0"></el-tab-pane>
          <el-tab-pane label="水质" name="1"></el-tab-pane>
          <el-tab-pane label="农作物" name="2"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 列表 -->
    <div class="tableGreenBox mt20">
      <el-table
        class="tableGreen"
        :data="tableList"
        ref="multipleTable"
        @select="handleSelectionChange"
        @select-all="handleSelectionChangeAll"
        style="width: 100%"
      >
      <el-table-column
        type="selection"
        header-align="right"
        align="right"
        width="40">
      </el-table-column>
      <el-table-column label="报告名称" header-align="left" align="left" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.reportName}}</span>
        </template>
      </el-table-column>
        <el-table-column label="检测机构" header-align="center" align="center" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.inspectionInstitution}}</span>
          </template>
        </el-table-column>
        <el-table-column label="颁发日期" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.issueDate ? $moment(scope.row.issueDate).format('YYYY-MM-DD') : '' }} </span>
          </template>
        </el-table-column>
        <el-table-column label="报告编号" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.numbering }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :class="bindList.includes(scope.row.id) ? 'greyColor' : 'greenButton'"
              @click="openDetail(scope.row)"
              >{{bindList.includes(scope.row.id) ? '取消' : '选中'}}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        :current-page.sync="currentPage"
        @current-change="handleCurrentChange"
        :page-size="8"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { getLandloilReportApi } from '@/api/mission'

export default {
  name: 'AgriLandList',
  components: {
  },

  data () {
    return {
      dialogVisible: false,
      params: {
        baseId: 0,
        reportType: 0
      },
      currentPage: 1,
      tableData: [],
      missions: [],
      total: 0,
      landMissionData: [],
      detail: {},
      detailId1: [], // 土壤
      detailId2: [], // 水质
      detailId3: [] // 农作物
    }
  },
  computed: {
    tableList () {
      const tableList = this.landMissionData.slice((this.currentPage - 1) * 8, this.currentPage * 8)
      this.total = this.landMissionData.length
      return tableList
    },
    bindList () {
      // 土壤
      let list = []
      if (this.params.reportType == 0) {
        list = this.detailId1
      }
      // 水质
      if (this.params.reportType == 1) {
        list = this.detailId2
      }
      // 农作物
      if (this.params.reportType == 2) {
        list = this.detailId3
      }
      return list
    }
  },
  created () {
    this.params.baseId = this.$store.getters.userInfo.baseId
  },

  methods: {
    handleSelectionChange (event, now) {
      this.getSameList(now.id)
    },
    // 获取选中列表
    getSameList (id) {
      // 土壤
      if (this.params.reportType == 0) {
        this.detailId1.includes(id) ? this.detailId1.splice(this.detailId1.indexOf(id), 1) : this.detailId1.push(id)
      }
      // 水质
      if (this.params.reportType == 1) {
        this.detailId2.includes(id) ? this.detailId2.splice(this.detailId2.indexOf(id), 1) : this.detailId2.push(id)
      }
      // 农作物
      if (this.params.reportType == 2) {
        this.detailId3.includes(id) ? this.detailId3.splice(this.detailId3.indexOf(id), 1) : this.detailId3.push(id)
      }
    },
    // 列表显示选中
    isCheckList () {
      this.$nextTick(() => {
        if (this.params.reportType == 0) {
          this.toggleSelection(this.detailId1)
        }
        // 水质
        if (this.params.reportType == 1) {
          this.toggleSelection(this.detailId2)
        }
        // 农作物
        if (this.params.reportType == 2) {
          this.toggleSelection(this.detailId3)
        }
      })
    },
    toggleSelection (rows) {
      console.log(rows)
      this.$refs.multipleTable.clearSelection()
      if (rows) {
        this.landMissionData.map(item => {
          console.log(rows.includes(item.id), item.id)
          if (rows.includes(item.id)) {
            this.$refs.multipleTable.toggleRowSelection(item)
          }
        })
      }
    },
    async handleCurrentChange (type) {
      if (type === 'isTop') {
        this.currentPage = 1
        await this.getReportList()
      }
      this.isCheckList()
    },
    handleSelectionChangeAll (event) {
      const list = event.map(item => item.id)
      const tableList = this.tableList.map(item => item.id)
      const sameElements = list.filter(item => tableList.includes(item))
      const differentInArray = sameElements.filter(item => {
        if (this.params.reportType == 0) {
          return !this.detailId1.includes(item)
        }
        if (this.params.reportType == 1) {
          return !this.detailId2.includes(item)
        }
        if (this.params.reportType == 2) {
          return !this.detailId3.includes(item)
        }
      })
      if (sameElements.length === 0) {
        tableList.map(item => {
          this.getSameList(item)
        })
      }
      if (sameElements.length === tableList.length) {
        differentInArray.map(item => {
          this.getSameList(item)
        })
      }
      this.isCheckList()
    },
    // 显示绑定数据
    async openShow (data) {
      this.dialogVisible = true
      await this.getReportList()
      this.detailId1 = data.soilids.split(',').map(Number)
      this.detailId2 = data.waterids.split(',').map(Number)
      this.detailId3 = data.pesticideids.split(',').map(Number)
      this.isCheckList()
    },
    // 获取绑定溯源详情
    openDetail (item) {
      if (this.params.reportType == 0) {
        this.detailId1.includes(item.id) ? this.detailId1.splice(this.detailId1.indexOf(item.id), 1) : this.detailId1.push(item.id)
        this.toggleSelection(this.detailId1)
      }
      // 水质
      if (this.params.reportType == 1) {
        this.detailId2.includes(item.id) ? this.detailId2.splice(this.detailId2.indexOf(item.id), 1) : this.detailId2.push(item.id)
        this.toggleSelection(this.detailId2)
      }
      // 农作物
      if (this.params.reportType == 2) {
        this.detailId3.includes(item.id) ? this.detailId3.splice(this.detailId3.indexOf(item.id), 1) : this.detailId3.push(item.id)
        this.toggleSelection(this.detailId3)
      }
      // for (let i = 0; i < this.detailCheckList.length; i++) {
      //   if (this.detailCheckList[i].landId !== this.params.landId) {
      //     this.$message.error('已绑定其他地块溯源数据')
      //     return
      //   }
      // }
    },
    // 关闭
    dialogBeforeClose () {
      this.$parent.showIdList({
        soilids: this.detailId1.toString(),
        waterids: this.detailId2.toString(),
        pesticideids: this.detailId3.toString()
      })
      this.dialogVisible = false
    },
    // 查询报告
    async getReportList () {
      const res = await getLandloilReportApi(this.params)
      this.landMissionData = res.data
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 10px 20px 20px 20px;
}
.searchBox {
  font-weight: 600;
  margin-bottom: 1.5vh;
  width: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .searchInp {
    width: 180px;
    height: 0.75rem * 0.834;
    margin-right: 1vw;
  }
  .searchBtn {
    background-color: #6adfae;
    border: #80efb1;
    font-weight: 600;
    width: 5.8333vw;
    height: 3.125vw * 0.834;
  }
  .searchBtn:hover {
    background-color: #80efb1;
  }
  ::v-deep .el-tabs__nav-wrap::after{
    background-color: unset
  }
}
.back {
  position: absolute;
  top: 5%;
  left: 5%;
}
.name {
  display: inline-block;
  ::v-deep .el-form-item__content {
    display: flex;
  }
  .addBtn {
    margin-left: .5208vw;
  }
}
.tableAuto {
  overflow-y: auto;
  height: 5rem;
}
.tableList {
  height: 6rem;
  overflow: auto;
}
.pagination {
  margin-top: 1.5625vw *0.834;
  text-align: right;
}
::-webkit-scrollbar {
    width: 0;
}
::-webkit-scrollbar-track {
    // background-color: red;
    background-color: #fff;
    border-radius: 0.15vw;
}
::-webkit-scrollbar-track-piece{
    background-color: #fff;
    border-radius: 0.15vw;
}
::-webkit-scrollbar-thumb{
    background-color: #fff;
    border-radius: 0.15vw;
}
.flexBtn {
    padding-top: 0.2rem;
    border-top: 1px solid #CCCCCC;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bindDialog {
  ::v-deep .el-dialog__header {
    display: none;
  }
  ::v-deep .el-dialog__body {
    padding: 40px 0px 85px 20px;
    position: relative;
  }
  .bindBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0;
    border-top: 1px solid #eaeaea;
    .editBtn {
      background: #00C586;
      border-radius: 3px;
    }
    .editBtnNone {
      background: none;
      color: #666666;
      border-color: #00C586;
      margin-right: 0.3vw
    }
  }
  .bindTitle {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  .bindBtn {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    ::v-deep .el-button--default {
      background: #EDF1F4;
      border-color: #EDF1F4;
      padding: 0.15rem 0.55rem
    }
    ::v-deep .el-button--success {
      background: #19B560;
      border-color: #19B560;
      padding: 0.15rem 0.55rem
    }
  }
  .bindLogo {
    margin: 30px auto 0 auto;
    > div {
      margin-top: 20px;
      display: flex;
      align-items: center;
      padding-left: 115px;
    }
    img {
      width: 0.22rem;
      margin-right: 0.1rem
    }
  }
}
::v-deep .el-dialog__title {
}
::v-deep .el-table-column--selection .cell {
  padding-left: 0;
  padding-right: 0
}
::v-deep .el-table th.el-table__cell > .cell {
  padding-left: 0;
  padding-right: 0
}
::v-deep .tableGreenBox .tableGreen th.el-table__cell.is-leaf:first-child{
  border-right: 0;
  padding-right: 10px
}
::v-deep .el-table__row td:first-child{
  border-right: 0;
  padding-right: 10px
}
::v-deep .el-table .cell {
  padding-left: 0;
  padding-right: 0
}
</style>
<style>
/* .el-dialog__header {
  background: #002a52;
  text-align: center;
} */
</style>
